﻿@using IOA.MES.DataAccess.VModel
@{
    ViewBag.Title = "分拣规则";
    Layout = "~/Views/Shared/_LayoutPage.cshtml";

    var workshops = ViewBag.Workshops as List<VWorkshop>;
    var machines = ViewBag.Machines as List<VMachine>;
}
@section Contents{
    <style>
        .layui-form-label {
            width: auto;
        }

        .layui-table-cell {
            height: auto;
        }
    </style>
}

<div id="page"></div>

<script type="text/template" id="tplPage">
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-form layui-card-header layuiadmin-card-header-auto">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label" v-html="lang.Field.WorkShop">车间：</label>
                        <div class="layui-input-inline">
                            <select id="selWorkshops" lay-filter="selWorkshops">
                                @foreach (var item in workshops)
                                {
                                    <option value="@item.WorkshopCode">@item.WorkshopName</option>
                                }
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label" v-html="lang.Field.Machine">设备：</label>
                        <div class="layui-input-inline">
                            <select id="selMachines" lay-filter="selMachines">
                                <option v-for="item in curMachines" :value="item.PkId">{{item.MachineName}}</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button id="btnSearch" class="layui-btn layuiadmin-btn-list" type="button">
                            <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                        </button>
                        <button id="btnEdit" class="layui-btn layuiadmin-btn-list" type="button">
                            <i class="layui-icon layui-icon-edit layuiadmin-button-btn"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div v-if="rules.length<=0" style="text-align:center;padding:50px;">暂无分拣规则</div>
        <div class="layui-row layui-col-space10">
            <div class="layui-col-md3" v-for="(rule, index) in rules">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <div class="layui-form-item">
                            <label class="layui-form-label">堆号：</label>
                            <div class="layui-input-block">
                                <input type="text" name="title" :value="rule.StackNo" readonly class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">满托数量：</label>
                            <div class="layui-input-block">
                                <input type="number" name="title" :value="rule.FullCount" readonly class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">块数：</label>
                            <div class="layui-input-block">
                                <input type="text" name="title" :value="rule.SortNo" readonly class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item" v-for="(item, index1) in rule.Rules">
                            <label class="layui-form-label">{{item.Key}}：</label>
                            <div class="layui-input-block">
                                <input type="text" name="title" :value="item.Value" readonly class="layui-input">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</script>

@section Scripts{
    <script>
        var vm = new Vue({
            el: "#page",
            template: "#tplPage",
            data: {
                lang: JSON.parse(lang).package,
                machines: @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(machines)),
                curMachines: [],
                rules: []
            },
            methods: {
            }
        });

        setTimeout(function () {
            initLayui();
        }, 50);
        function initLayui() {
            layui.use(['table', 'layer', 'form', 'laydate'], function () {
                var form = layui.form;
                form.render();

                form.on("select(selWorkshops)", function (item) {
                    var curMachines = vm.machines.filter(function (e) {
                        return e.WorkshopCode == item.value;
                    });
                    vm.$data.curMachines = curMachines;

                    setTimeout(function () {
                        form.render();
                    }, 100);
                });

                initRules();
                function initRules() {
                    var curMachines = vm.machines.filter(function (e) {
                        return e.WorkshopCode == $("#selWorkshops").val().trim();
                    });
                    vm.$data.curMachines = curMachines;

                    setTimeout(function () {
                        form.render();
                        queryRules();
                    }, 100);
                }

                $("#btnSearch").click(function () {
                    queryRules();
                });
                setTimeout(function () {
                    queryRules();
                }, 150);
                function queryRules() {
                    if (vm.$data.curMachines.length <= 0) {
                        vm.$data.rules = [];
                        return;
                    }
                    $.ajax({
                        url: '/ParaSetting/QueryValidRules',
                        data: {
                            workshopCode: $("#selWorkshops").val().trim(),
                            machineId: parseInt($("#selMachines").val().trim())
                        },
                        type: 'post',
                        dataType: 'json',
                        success: function (res) {
                            console.log(res);
                            vm.$data.rules = res.Data;
                        }
                    })
                }
                $("#btnEdit").click(function () {
                    if (vm.$data.curMachines.length <= 0) {
                        return;
                    }
                    parent.layui.index.openTabsPage("/ParaSetting/SortRuleEdit?workshopCode=" + $("#selWorkshops").val().trim() + "&machineId=" + $("#selMachines").val().trim(), "分拣规则");
                });
            });
        }
    </script>
}
